<template>
<div>
<div class="sear">
<input type="text" placeholder="输入城市名或拼音" v-model="keywords"/>
</div>
<div>

<ul class="search-result" v-show="keywords != '' ">
<div>
<li class="border-bottom" v-for="item of resultList" :key="item.id">{{ item.name }}</li>
<li v-if="resultList == '' ? true :false">无法匹配到该地区</li>
</div>
</ul>
</div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CitySearch',
  props: {
    lists: Object
  },
  mounted () {
    let wrappers = document.querySelector('.search-result')
    this.scroll = new BScroll(wrappers)
  },
  data () {
    return {
      keywords: '',
      resultList: []
    }
  },
  watch: {
    keywords () { // 输入框的值变化时做搜索操作-筛选包含关键字 信息的数据(数组类型)
    // 筛选包含关键字信息的数据
      let result = [] // 保存搜索结果
      for (let key in this.lists) {
        this.lists[key].forEach((obj, index) => {
          if (obj.spell.indexOf(this.keywords) !== -1 || obj.name.indexOf(this.keywords) !== -1) { // 如果该对象的spell属性包含keywords,证明该对象是搜索结果中的一项， 将该项保存到数组中
            result.push(obj)
          }
        })
      }
      this.resultList = result
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  @import '~@/assets/css/variable.styl'
  .sear
    background $bgcolor
    padding-bottom 0.1rem
    padding-left 0.2rem
    input
     width 98%
     text-align $center
     padding 0.1rem 0rem
     border-radius 0.06rem
  .search-result
    background #EEEEEE
    position absolute
    top 1.58rem
    right 0rem
    left 0rem
    bottom 0rem
    z-index 1
    overflow hidden
    li
      line-height 0.6rem
      color #616161
      padding-left 0.2rem
      background white
</style>
